/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:hadss_adaptive_layout/hadss_adaptive_layout.dart';

import '../../../l10n/generated/app_localizations.dart';

class Head extends StatefulWidget {
  final WidthBreakpoint screenType;
  final num currentWidth;
  final String textFieldValue;
  final num currentIndex;
  final Function(String v) setTextValue;
  final Function(dynamic v) setTextTopValue;

  const Head({
    Key? key,
    required this.screenType,
    required this.currentWidth,
    required this.textFieldValue,
    required this.setTextValue,
    required this.currentIndex,
    required this.setTextTopValue,
  }) : super(key: key);

  @override
  State<Head> createState() => _HeadState();
}

class _HeadState extends State<Head> {
  // 创建控制器
  final _textController = TextEditingController();
  num _currentIndex = 0;

  @override
  void initState() {
    super.initState();
    _textController.text = widget.textFieldValue;
    _currentIndex = widget.currentIndex;
  }

  Widget getSmTop(il8n, textController) {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            SizedBox(
              width: widget.currentWidth * 0.8,
              child: ShaderMask(
                  blendMode: BlendMode.dstOut,
                  shaderCallback: (Rect bounds) {
                    return const LinearGradient(stops: [
                      0.0,
                      0.05,
                      0.95,
                      1.0
                    ], colors: [
                      Colors.black,
                      Colors.transparent,
                      Colors.transparent,
                      Colors.black,
                    ]).createShader(bounds);
                  },
                  child: ScrollConfiguration(
                      behavior: ScrollConfiguration.of(context).copyWith(
                        dragDevices: {
                          PointerDeviceKind.touch,
                          PointerDeviceKind.mouse,
                          PointerDeviceKind.trackpad,
                        },
                      ),
                      child: SingleChildScrollView(
                        scrollDirection: Axis.horizontal,
                        child: Row(
                          children: [
                            _buildSmButton(il8n.picks, 0),
                            _buildSmButton(il8n.video, 1),
                            _buildSmButton(il8n.community, 2),
                            _buildSmButton(il8n.news, 3),
                            _buildSmButton(il8n.shopping, 4),
                            _buildSmButton(il8n.sciTech, 5),
                            _buildSmButton(il8n.finance, 6),
                            _buildSmButton(il8n.history, 7),
                          ],
                        ),
                      ))),
            ),
            Container(
              width: 36,
              height: 36,
              margin: const EdgeInsets.only(right: 10),
              decoration: const BoxDecoration(
                color: Color(0xFFE4E4E4),
                borderRadius: BorderRadius.all(Radius.circular(30)),
              ),
              child: Image.asset('lib/assets/images/more.png'),
            ),
          ],
        ),
        const SizedBox(
          height: 18,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              margin: const EdgeInsets.only(left: 10),
              width: widget.currentWidth * 0.82,
              height: 40,
              decoration: BoxDecoration(
                  color: const Color.fromARGB(5, 0, 0, 0),
                  border: Border.all(color: Colors.white60, width: 0.5),
                  borderRadius: BorderRadius.circular((20.0))),
              child: TextField(
                  controller: textController,
                  decoration: InputDecoration(
                      hintText: il8n.search,
                      prefixIcon:
                          Image.asset('lib/assets/images/s_search.png'),
                      contentPadding: const EdgeInsets.only(top: 4, left: 10),
                      border: InputBorder.none)),
            ),
            Container(
              margin: const EdgeInsets.only(right: 10),
              child: Image.asset('lib/assets/images/clock.png'),
            ),
          ],
        )
      ],
    );
  }

  Widget getMdTop(il8n, textController) {
    return Container(
      margin: const EdgeInsets.fromLTRB(5, 0, 20, 0),
      height: 56,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            width: widget.currentWidth * 0.55,
            child: ShaderMask(
                blendMode: BlendMode.dstOut,
                shaderCallback: (Rect bounds) {
                  return const LinearGradient(stops: [
                    0.0,
                    0.05,
                    0.95,
                    1.0
                  ], colors: [
                    Colors.black,
                    Colors.transparent,
                    Colors.transparent,
                    Colors.black,
                  ]).createShader(bounds);
                },
                child: ScrollConfiguration(
                    behavior: ScrollConfiguration.of(context).copyWith(
                      dragDevices: {
                        PointerDeviceKind.touch,
                        PointerDeviceKind.mouse,
                        PointerDeviceKind.trackpad,
                      },
                    ),
                    child: SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                      child: Row(
                        children: [
                          _buildMdButton(il8n.picks, 0),
                          _buildMdButton(il8n.video, 1),
                          _buildMdButton(il8n.community, 2),
                          _buildMdButton(il8n.news, 3),
                          _buildMdButton(il8n.shopping, 4),
                          _buildMdButton(il8n.sciTech, 5),
                          _buildMdButton(il8n.finance, 6),
                          _buildMdButton(il8n.history, 7),
                        ],
                      ),
                    ))),
          ),
          Row(
            children: [
              Container(
                width: 150,
                height: 40,
                decoration: BoxDecoration(
                    color: const Color.fromARGB(5, 0, 0, 0),
                    border: Border.all(color: Colors.white60, width: 0.5),
                    borderRadius: BorderRadius.circular((20.0))),
                child: TextField(
                    controller: textController,
                    decoration: InputDecoration(
                        hintText: il8n.search,
                        prefixIcon:
                            Image.asset('lib/assets/images/s_search.png'),
                        contentPadding:
                            const EdgeInsets.only(top: 4, left: 10),
                        border: InputBorder.none)),
              )
            ],
          ),
          Image.asset('lib/assets/images/clock.png'),
          Image.asset('lib/assets/images/more.png')
        ],
      ),
    );
  }

  Widget getLgTop(il8n, textController) {
    return Container(
      margin: const EdgeInsets.fromLTRB(5, 0, 20, 0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            width: widget.currentWidth * 0.4,
            child: ShaderMask(
                blendMode: BlendMode.dstOut,
                shaderCallback: (Rect bounds) {
                  return const LinearGradient(stops: [
                    0.0,
                    0.05,
                    0.95,
                    1.0
                  ], colors: [
                    Colors.black,
                    Colors.transparent,
                    Colors.transparent,
                    Colors.black,
                  ]).createShader(bounds);
                },
                child: ScrollConfiguration(
                    behavior: ScrollConfiguration.of(context).copyWith(
                      dragDevices: {
                        PointerDeviceKind.touch,
                        PointerDeviceKind.mouse,
                        PointerDeviceKind.trackpad,
                      },
                    ),
                    child: SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                      child: Row(
                        children: [
                          _buildLgButton(il8n.picks, 0),
                          _buildLgButton(il8n.video, 1),
                          _buildLgButton(il8n.community, 2),
                          _buildLgButton(il8n.news, 3),
                          _buildLgButton(il8n.shopping, 4),
                          _buildLgButton(il8n.sciTech, 5),
                          _buildLgButton(il8n.finance, 6),
                          _buildLgButton(il8n.history, 7),
                        ],
                      ),
                    ))),
          ),
          SizedBox(
            width: widget.currentWidth * 0.4,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Container(
                  width: widget.currentWidth * 0.3,
                  height: 40,
                  decoration: BoxDecoration(
                      color: const Color.fromARGB(5, 0, 0, 0),
                      border: Border.all(color: Colors.white60, width: 0.5),
                      borderRadius: BorderRadius.circular((20.0))),
                  child: TextField(
                      controller: textController,
                      decoration: InputDecoration(
                          hintText: il8n.search,
                          prefixIcon:
                              Image.asset('lib/assets/images/s_search.png'),
                          contentPadding:
                              const EdgeInsets.only(top: 4, left: 10),
                          border: InputBorder.none)),
                ),
                Image.asset('lib/assets/images/clock.png'),
                Image.asset('lib/assets/images/more.png')
              ],
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // 监听文本变化
    _textController.addListener(() {
      widget.setTextValue(_textController.text);
    });
    AppLocalizations il8n = AppLocalizations.of(context)!;
    if (widget.screenType == WidthBreakpoint.sm ||
        widget.screenType == WidthBreakpoint.xs) {
      return getSmTop(il8n, _textController);
    } else if (widget.screenType == WidthBreakpoint.md) {
      return getMdTop(il8n, _textController);
    } else {
      return getLgTop(il8n, _textController);
    }
  }

  Widget _buildSmButton(
    String label,
    int index,
  ) {
    return InkWell(
      onTap: () {
        setState(() => _currentIndex = index);
        widget.setTextTopValue(index);
      },
      child: Container(
        // padding: EdgeInsets.symmetric(vertical: 26),
        child: _currentIndex == index
            ? Container(
                width: 60,
                height: 36,
                margin: const EdgeInsets.fromLTRB(15, 0, 0, 0),
                padding: const EdgeInsets.fromLTRB(16, 10, 16, 8),
                decoration: const BoxDecoration(
                  color: Color(0xFF0A59F7),
                  borderRadius: BorderRadius.all(Radius.circular(30)),
                ),
                child: Text(
                  label,
                  style: const TextStyle(
                    color: Color(0xFFFFFFFF),
                    fontSize: 14,
                    fontWeight: FontWeight.w600,
                  ),
                ))
            : Container(
                width: 60,
                height: 36,
                margin: const EdgeInsets.fromLTRB(10, 0, 0, 0),
                padding: const EdgeInsets.fromLTRB(16, 10, 16, 8),
                decoration: const BoxDecoration(
                  color: Color(0xFFE4E4E4),
                  borderRadius: BorderRadius.all(Radius.circular(30)),
                ),
                child: Text(
                  label,
                  style: const TextStyle(
                      color: Color(0xFF171717),
                      fontSize: 14,
                      fontWeight: FontWeight.w600),
                )),
      ),
    );
  }

  Widget _buildMdButton(
    String label,
    int index,
  ) {
    return InkWell(
      onTap: () => setState(() => _currentIndex = index),
      child: Container(
        child: _currentIndex == index
            ? Container(
                margin: const EdgeInsets.fromLTRB(15, 0, 0, 0),
                child: Text(
                  label,
                  style: const TextStyle(
                      color: Color(0xFF182431),
                      fontSize: 24,
                      fontWeight: FontWeight.w800),
                ))
            : Container(
                margin: const EdgeInsets.fromLTRB(12, 0, 12, 0),
                child: Text(
                  label,
                  style: const TextStyle(
                      color: Color(0xFF747C83),
                      fontSize: 18,
                      fontWeight: FontWeight.w600),
                )),
      ),
    );
  }

  Widget _buildLgButton(
    String label,
    int index,
  ) {
    return InkWell(
      onTap: () => setState(() => _currentIndex = index),
      child: Container(
          padding: const EdgeInsets.symmetric(vertical: 26),
          child: _currentIndex == index
              ? Container(
                  margin: const EdgeInsets.fromLTRB(15, 0, 0, 0),
                  child: Text(
                    label,
                    style: const TextStyle(
                        color: Color(0xFF182431),
                        fontSize: 24,
                        fontWeight: FontWeight.w800),
                  ))
              : Container(
                  margin: const EdgeInsets.fromLTRB(12, 0, 12, 0),
                  child: Text(
                    label,
                    style: const TextStyle(
                        color: Color(0xFF747C83),
                        fontSize: 18,
                        fontWeight: FontWeight.w600),
                  ))),
    );
  }
}
